import React from 'react'
import { Form, Input, Select, DatePicker, message, Row, Col, Button } from "antd"
import { useDispatch } from "umi"
import rewardList from "@/staticLists/rewardList";
import { rewardRule } from "@/utils/rules";
import { createOption } from "@/utils/selectOption";
import DropPopover from "@/components/DropPopover"
import { mapData } from "@/utils/mapData";
import $http from "@/services";
import UploadComp from '@/components/UploadComponent/UploadComp';
export default function index({ addStaffFn, }) {
    const [form] = Form.useForm();
    // 节点的创建
    const RewAndPubNode = {
        input(item) {
            return <Input className="border-color" placeholder={item.initVal}></Input>
        },
        date(item) {
            return <DatePicker style={{ width: "100%" }} ></DatePicker>
        },
        select(item) {
            return <Select options={createOption(mapData[item.optionName])} ></Select>
        },
        upload(item) {
            return <UploadComp avatar={item.file} getNewAvatar={(newAvatar) => {
                form.setFieldValue("fileList", [newAvatar])
            }}></UploadComp>
        },
        popover(item) {
            return <Input
                readOnly
                placeholder={item.initVal}
                addonAfter={<DropPopover
                    searchType={item.type}
                    interfaced={item.url}
                    placeValue={item.labelTxt}
                    getnewValue={(newItem) => {
                        form.setFieldsValue({
                            staffNameVal: newItem.userName,
                            staffName: newItem._id
                        })
                    }}></DropPopover>}></Input>
        }
    }

    const handFinish = async (data) => {
        const staffName = form.getFieldValue('staffName');
        delete data.staffNameVal;
        delete data.file;
        const fileList = form.getFieldValue('fileList');
        data.type = `${data.type}`;
        data = { ...data, staffName, fileList };
        const { code, msg } = await $http.createRewardAndPunishment(data);
        if (!code) {
            message.success(msg);
            addStaffFn();
        }
    }
    return (
        <Form layout='vertical' form={form} onFinish={handFinish}>
            {rewardList.map((el, index) => {
                return (<Row justify={'space-between'} key={index}>
                    {el.map((item, childIndex) => {
                        return <Col span="11" key={childIndex}>
                            <Form.Item
                                name={item.itemName}
                                label={item.labelTxt}
                                rules={rewardRule[item.itemName]}>
                                {RewAndPubNode[item.renderType](item)}
                            </Form.Item>
                        </Col>
                    })}
                </Row>)
            })}
            <Row justify={"end"}>
                <Col>
                    <Button type='primary' htmlType='submit'>创建</Button>
                </Col>
            </Row>
        </Form>
    )
}
